<template>
	<view id="modal-page" :class="show ? 'show':'none'" @touchmove.stop.prevent="stopPrevent">
		<view class="mask" @click="clickMask"></view>
		<view class="layer" @click.stop="stopPrevent">
			<view class="modal-header">{{title ? title : '提示'}}</view>
			<view class="modal-body">
				<template v-if="content">
				    <text class="modal-content">{{content}}</text>
				</template>
				<template v-else>
				    <slot></slot>
				</template>
			</view>
			<view class="modal-footer">
				<view class="cancel-btn" v-if="showCancel" @click="cancleModal">{{cancelTitle}}</view>
				<view :class="confrimTitle=='确认'?'confirm-btn':'confirm-btn confirm-btn-info'" :style="{'color' : confirmColor}" v-if="showConfirm" @click="confirmModal">{{confrimTitle}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			showModal: { //是否显示模态框
			    type: [Boolean, String],
			    default: false
			},
			showCancel: { //是否显示取消按钮，默认为 true
			    type: [Boolean, String],
			    default: true
			},
			showConfirm: { //是否显示取消按钮，默认为 true
			    type: [Boolean, String],
			    default: true
			},
			autoClose: { //点击遮罩是否自动关闭弹窗
			    type: [Boolean, String],
			    default: true
			},
			confirmColor:{
				type: String,
				default: ''
			},
			title: { //标题
			    type: String,
			    default: ''
			},
			cancelTitle: { //标题
			    type: String,
			    default: '取消'
			},
			confrimTitle: { //标题
			    type: String,
			    default: '确定'
			},
			content: String, //提示的内容
		},
		data (){
			return {
				show: false
			}
		},
		created() {
			this.show = this.showModal
		},
		watch: {
		    showModal(val) {
				// console.log(val)
				this.show = val
		    },
				// confrimTitle(){
				// 	console.log(this.confrimTitle);
				// }
		},
		methods:{
			stopPrevent(){

			},
			clickMask(){
				if(this.autoClose){
					this.$emit('cancleModal')
				}
			},
			cancleModal(){
				this.$emit('cancleModal')
			},
			confirmModal() {
			    this.$emit('confirmModal')
			}
		}
	}
</script>

<style lang="scss">
	#modal-page {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		width: 100%;
		height: 100%;
		&.show {
			display: block;
			.mask{
				animation: showPopup 0.2s linear both;
			}
			.layer {
				animation: showLayer 0.2s linear both;
			}
		}
		&.hide {
			.mask{
				animation: hidePopup 0.2s linear both;
			}
			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}
		&.none {
			display: none;
		}
		.mask{
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}
		.layer {
			position: absolute;
			z-index: 999;
			top: 15%;
			left: 100upx;
			right: 100upx;
			transform: translate(-50%, -50%) ;
			transition: transform 0.3s;
			border-radius: 20upx;
			background-color: #fff;
			overflow: hidden;
			.modal-header {
				position: relative;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding: 18upx 24upx;
				line-height: 1.5;
				color: #333;
				font-size: $font-lg;
				text-align: center;
				&::after {
				    content: " ";
				    position: absolute;
				    left: 0;
				    bottom: 0;
				    right: 0;
				    height: 1px;
				    border-top: 1px solid #e5e5e5;
				    transform-origin: 0 0;
				    transform: scaleY(.5);
				}
			}
			.modal-body {
				position: relative;
				color: #333;
				font-size: $font-base;
				box-sizing: border-box;
				padding: 38upx 20upx;
				&::after {
				    content: " ";
				    position: absolute;
				    left: 0;
				    bottom: -1px;
				    right: 0;
				    height: 1px;
				    border-bottom: 1px solid #e5e5e5;
				    transform-origin: 0 0;
				    transform: scaleY(.5);
				}
			}
			.modal-footer{
				position: relative;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #333;
				font-size: 32upx;
				display: flex;
				flex-direction: row;
				.cancel-btn, .confirm-btn {
					position: relative;
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					height: 88upx;
					font-size: 28upx;
					line-height: 88upx;
					text-align: center;
					background-color: #fff;
					color: #333;
				}
				.confirm-btn {
					color: $theme-color;
				}
				.confirm-btn-info{
					color: #ccc;
				}
				.cancel-btn::after {
				    content: " ";
				    position: absolute;
				    right: -1px;
				    top: 0;
				    width: 1px;
				    bottom: 0;
				    border-right: 1px solid #e5e5e5;
				    transform-origin: 0 0;
				    transform: scaleX(.5);
				}
			}
		}
		@keyframes showPopup {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes hidePopup {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}
			100% {
				transform: translateY(0%);
			}
		}
		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}
			100% {
				transform: translateY(120%);
			}
		}
	}
</style>
